<template>
  <a-card style="margin-top: 24px" :bordered="false" title="服务商返现明细">
    <div class="downSelect">
      <a-form>
        <a-row>
          <a-form-item label="触发返现日期" v-bind="formItemLayout">
            <a-range-picker
              :disabledDate="disabledDate"
              style="width: 100%"
              format="YYYYMMDD"
              @change="onChange"
              @calendarChange="calendarPriceRangeChange"
              v-model="triggerDate"
              :allowClear="isClear"
            />
          </a-form-item>
        </a-row>
        <a-row>
          <a-col :span="4"></a-col>
          <a-col :span="12" :offset="1">
            <a-form-item>
              <a-button @click="refreshHandle()">刷新</a-button>
              <a-button
                type="primary"
                style="margin-left: 3vw"
                @click="downLoadFile()"
                >下载报表</a-button
              >
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-box">
      <a-table
        class="tableClass"
        :columns="columns"
        :dataSource="dataSource"
        size="small"
        :pagination="false"
        :loading="loading"
        bordered
        :rowKey="(record) => record.downloadToken"
      >
        <span slot-scope="record" slot="action">
          <span
            style="color: #25a2e4; cursor: pointer"
            @click="downloadItem(record.downloadToken, record.uploadFileName)"
            >下载</span
          >
        </span>
      </a-table>

      <a-pagination
        v-if="total"
        class="paginationClass"
        @change="onPageChange"
        :current="downloadQuery.page"
        :total="total"
        :pageSize="downloadQuery.pageSize"
      />
    </div>
  </a-card>
</template>

<script>
import { DownExcelItem } from "@/utils/validate.js";
import moment from "moment";
const columns = [
  {
    title: "导出时间",
    dataIndex: "ctime",
  },
  {
    title: "文件名称",
    dataIndex: "uploadFileName",
  },
  // {
  //   title: "操作员",
  //   dataIndex: "showName",
  // },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  data() {
    return {
      isClear: true,
      triggerDate: [], // 触发返现时间
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 1 },
          md: { span: 12, offset: 1 },
        },
      },
      listQuery: {
        triggerStartDate: "",
        triggerEndDate: "",
      },
      columns,
      dataSource: [],
      loading: false,
      downloadQuery: {
        page: 1,
        pageSize: 10,
        data: {
          rootPath: "cash.back",
        },
      },
      total: 0,
      DownExcelItem,
      currentdisabledDate: null,
    };
  },
  mounted() {
    this.getTableLists();
  },
  methods: {
    disabledDate(current) {
      if (this.currentdisabledDate) {
        return (
          current > moment().subtract("day") ||
          current >= moment(this.currentdisabledDate).add(366, "day") ||
          current <= moment(this.currentdisabledDate).subtract(366, "day")
        );
      } else {
        return current > moment().subtract("day");
      }
    },
    calendarPriceRangeChange(date) {
      this.currentdisabledDate = date[0];
    },
    onChange(dates, dateStrings) {
      if (dateStrings[0]) {
        this.listQuery.triggerStartDate = dateStrings[0];
        this.listQuery.triggerEndDate = dateStrings[1];
      } else {
        this.currentdisabledDate = null;
      }
    },

    downLoadFile() {
      if (!this.listQuery.triggerStartDate) {
        this.$message.warning("请选择返现日期！");
        return false;
      }
      var temp_data = {
        data: this.listQuery,
      };

      this.$axios
        .post("/agent/withdraw/market/cashBackExcel", temp_data)
        .then((res) => {
          if (res.data.code == "OK") {
            this.DownExcelItem(res.data.data, "");
            let self = this;
            let timer = setTimeout(function () {
              self.getTableLists();
            }, 2000);
          } else {
            this.$message.error(res.data.message);
          }
        });
    },

    getTableLists() {
      this.loading = true;
      this.$axios
        .post("/agent/transaction/profit/excelRecord", this.downloadQuery)
        .then((res) => {
          if (res.data.code == "OK") {
            this.dataSource = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message.warning(res.data.message);
          }
          this.loading = false;
        });
    },

    refreshHandle() {
      if (this.dataSource.length) {
        this.getTableLists();
      }
    },
    downloadItem(downloadToken, uploadFileName) {
      this.DownExcelItem(downloadToken, uploadFileName);
    },
    onPageChange(page, pageSize) {
      this.downloadQuery.page = page;
      this.downloadQuery.pageSize = pageSize;
      this.getTableLists();
    },
  },
};
</script>

<style lang="less" scoped>
.downSelect {
  width: 600px;
  margin: 0 auto;
  padding: 10px;
}

.table-box {
  width: 70%;
  margin: 15px auto;
}

.paginationClass {
  text-align: center;
  margin-top: 30px;
}
</style>